<template>
  <div>
    <div class="top">
      <img src="../assets/images/login.png" alt="" />
    </div>
    <div class="center">
      <van-form>
        <van-field
          v-model="form.mobile"
          name="用户名"
          label="用户名"
          placeholder="用户名"
          :rules="[{ required: true, message: '请填写用户名' }]"
        />
        <van-field
          v-model="form.password"
          type="password"
          name="密码"
          label="密码"
          placeholder="密码"
          :rules="[{ required: true, message: '请填写密码' }]"
        />
      </van-form>
      <div style="color: #999; font-size: 20px" class="alert">
        <p>找回密码</p>
        <p @click="$router.push('/smslogin')">注册/验证码登录</p>
      </div>
      <button class="btn" @click="goLogin">登录</button>
    </div>
  </div>
</template>
<script>
const reg =
  /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/;
import { goLogin } from "../tool/login";
export default {
  data() {
    return {
      form: {
        mobile: "",
        password: "",
        type: 1,
        client: 1,
      },
    };
  },
  methods: {
    // 登录
    async goLogin() {
      let res = await goLogin(this.form);
      console.log(res);
      if (res.code == 200) {
        localStorage.setItem("LoginToken", res.data.remember_token);
        this.$router.push("/my");
      } else {
        this.$Toast(res.msg);
      }
    },
  },
};
</script>
<style lang="scss" scoped>
.top {
  text-align: center;
  img {
    width: 525px;
    height: 115px;
    margin: 80px auto;
  }
}
.center {
  padding: 0 80px;
  form {
    p {
      display: flex;
      justify-content: space-between;
      line-height: 1.33rem;
      font-size: 0.373rem;
      input {
        border: none;
      }
      .code {
        color: #ef8236;
      }
    }
  }
  .alert {
    margin: 10px 0;
    display: flex;
    justify-content: space-between;
  }
  .btn {
    width: 100%;
    height: 65px;
    line-height: 65px;
    color: white;
    background-color: #fd6613;
    text-align: center;
    border-radius: 50px;
    font-size: 20px;
    margin-top: 50px;
    border: none;
  }
}

.active {
  border-bottom: 1px solid #ef8236;
}
</style>